<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>cpu</title>
    <script type="text/javascript" src="{{ url_for('static',filename='jquery-3.1.1.min.js')}}">
    </script>
    <script type="text/javascript" src="{{ url_for('static',filename='echarts.min.js')}}">
    </script>
    <script type="text/javascript" src="{{ url_for('static',filename='jquery.dataTables.min.js')}}">
    </script>jquery.dataTables.min.js
  </head>
  <body>
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;">
    </div>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>



    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(
      {
        title:{
          text:'cpu温度'
        },
        tooltip:{},
        legend:{
          data:['温度']
        },
        xAxis:{
          data:[]
        },
        yAxis:{
          min:35,
          max:45,
        },
        series:[
          {
            name:'CPU温度',
            type:'line',
            data:[]
          }
        ]
      }
    );
    myChart.showLoading();
    $.get('/data').done(function (data){
      myChart.hideLoading();
      myChart.setOption({
        xAxis:{
          data:data.time
        },
        series:[{
          name:'CPU温度',
          data:data.cputemp.map(parseFloat)
        }]
      });
    });

    </script>

  </body>
</html>
